<template>
  <div>
    <div :id="editorId" class="editor-class"></div>
  </div>
</template>
<script>
import "../../../../pubilc/static/ueditor/ueditor.config.js";
import "../../../../pubilc/static/ueditor/ueditor.all.min";
import "../../../../pubilc/static/ueditor/ueditor.parse.js";
import "../../../../pubilc/static/ueditor/lang/zh-cn/zh-cn.js";
import "../../../../pubilc/static/ueditor/themes/default/css/ueditor.css";
export default {
  name: "UEditor",
  props: {
    /* 编辑器Id */
    editorId: {
      type: String,
      default: "",
    },
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    /* 高度 */
    height: {
      type: Number,
      default: 400,
    },
  },
  data() {
    return {
      editor: null,
      config: {
        // 富文本层级
        zIndex: 999,
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 400,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 上传文件接口（修改成自己的接口地址）
        serverUrl: process.env.VUE_APP_BASE_API + "/XXXX",
        // UEditor 资源文件的存放路径
        UEDITOR_HOME_URL: "static/ueditor/",
      },
    };
  },
  mounted() {
    /**
     * 初始化编辑器，并设置值
     */
    this.editor = UE.getEditor(this.editorId, this.config);
    this.editor.addListener("ready", () => {
      this.editor.setContent(this.value);
    });
    /**
     * 监听编辑器，当编辑器中输入内容时与父组件进行同步
     */
    this.editor.addListener("contentChange", () => {
      this.$emit("input", this.editor.getContent());
    });
  },
  methods: {
    getUEContent() {
      return this.editor.getContent();
    },
    setUEContent(value) {
      return this.editor.setContent(value);
    },
  },
  destroyed() {
    this.editor.destroy();
  },
};
</script>
<style type="text/less" scoped>
/* element-ui与UEditor样式冲突解决方案 */
.editor-class {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  padding: 0 !important;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  word-wrap: break-word;
}
</style>
